<template>
  <div class="home">
    <div class="header">
      <image style="width: 100%;height: 100px" :src="config.header_bg"></image>
      <div class="title">
        <image style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px" :src="config.logo"></image>
        <div>{{ config.header_title }}</div>
      </div>
    </div>
    <div class="content">
      <div class="tabs">
        <div
            @click="getProductList(item.id)"
            :class="['tab', activeTab === item.id ? 'active' : '']"
          v-for="item in categoryList" :key="item.id">
          {{ item.name }}
        </div>
        <div
            @click="activeTab = 'buse'"
            :class="['tab', activeTab === 'buse' ? 'active' : '']"
           >
          核心优势
        </div>
      </div>
      <div class="right" v-if="activeTab !== 'buse'">
        <view class="screen-swiper-box">
          <swiper
              height="200rpx"
              style="height: 200rpx"
              indicator-dots="true"
              circular="true" :autoplay="false">
            <swiper-item v-for="item in swiperList">
              <video style="height: 200rpx;width: 100%" v-if="item.type === 'video'" id="myVideo" :src="item.url" controls></video>
              <u-image v-else :src="item.url" height="200rpx" mode="aspectFit"></u-image>
            </swiper-item>
          </swiper>
        </view>
        <div class="product-list">
          <u-row gutter="12">
            <u-col span="6" v-for="item in productList" :key="item.id">
              <div class="list-item" @click="toDetail(item)">
                <div class="vote-img" :style="{ backgroundImage: 'url(' + item.post_url + ')'}">
                </div>
                <div class="vote-text">
                  <div class="vote-name">
                    {{ item.name }}
                  </div>
                  <div class="vote-name">
                    {{ item.unit }} {{ item.price }}
                  </div>
                </div>
              </div>
            </u-col>
            <u-col span="6" v-for="item in productList" :key="item.id">
              <div class="list-item" @click="toDetail(item)">
                <div class="vote-img" :style="{ backgroundImage: 'url(' + item.post_url + ')'}">
                </div>
                <div class="vote-text">
                  <div class="vote-name">
                    {{ item.name }}
                  </div>
                  <div class="vote-name">
                    {{ item.unit }} {{ item.price }}
                  </div>
                </div>
              </div>
            </u-col>
            <u-col span="6" v-for="item in productList" :key="item.id">
              <div class="list-item" @click="toDetail(item)">
                <div class="vote-img" :style="{ backgroundImage: 'url(' + item.post_url + ')'}">
                </div>
                <div class="vote-text">
                  <div class="vote-name">
                    {{ item.name }}
                  </div>
                  <div class="vote-name">
                    {{ item.unit }} {{ item.price }}
                  </div>
                </div>
              </div>
            </u-col>
            <u-col span="6" v-for="item in productList" :key="item.id">
              <div class="list-item" @click="toDetail(item)">
                <div class="vote-img" :style="{ backgroundImage: 'url(' + item.post_url + ')'}">
                </div>
                <div class="vote-text">
                  <div class="vote-name">
                    {{ item.name }}
                  </div>
                  <div class="vote-name">
                    {{ item.unit }} {{ item.price }}
                  </div>
                </div>
              </div>
            </u-col>
            <u-col span="6" v-for="item in productList" :key="item.id">
              <div class="list-item" @click="toDetail(item)">
                <div class="vote-img" :style="{ backgroundImage: 'url(' + item.post_url + ')'}">
                </div>
                <div class="vote-text">
                  <div class="vote-name">
                    {{ item.name }}
                  </div>
                  <div class="vote-name">
                    {{ item.unit }} {{ item.price }}
                  </div>
                </div>
              </div>
            </u-col>
          </u-row>

          <u-empty v-if="productList.length === 0"></u-empty>
        </div>
      </div>
      <div class="right" v-if="activeTab === 'buse'" v-html="config.buse_html" style="padding: 20rpx"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      config: {
        header_bg: '',
        header_title: '',
        ad_url: '',
        buse_html: ''
      },
      categoryList: [

      ],
      activeTab: '',
      productList: [],
    }
  },
  computed: {
    swiperList() {
      if (!this.config.ad_url)  return []
      let list = this.config.ad_url.split(',').filter(item => item)
      return list.map(item => {
        // 判断结尾是不是视频
        return {
          url: item,
          type: item.includes('.mp4') ? 'video' : 'image'
        }
      })
    }
  },
  onLoad() {
    this.$api.getConfigList().then(res => {
      if (res.length) {
        this.config = res[0]
      }
    })
    this.getCategoryList()
  },
  methods: {
    getCategoryList() {
      this.$api.getCategoryList().then(res => {
        this.categoryList = res
        if (res.length > 0) {
          this.activeTab = res[0].id
          this.getProductList()
        }
      })
    },
    getProductList(id) {
      if (id) {
        this.activeTab = id
      }
      this.$api.getProductList({
        category_id: this.activeTab,
        pid: 0
      }).then(res => {
        console.log(res)
        this.productList = res
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/product/index?pid=${item.id}`
      })
    },
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.home {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  .header {
    margin-bottom: 20rpx;
    position: relative;
    .title {
      position: absolute;
      left: 50rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #ffffff;
      display: flex;
      align-items: center;
    }
  }
  .content {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    .tabs {
      height: 100%;
      width: 30%;
      flex-shrink: 0;
      background: #F3F3F3;
      .tab {
        line-height: 100rpx;
        width: 100%;
        text-align: center;
        // 溢出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-left: 4px solid transparent;
        color: #666666;
        font-size: 28rpx;
      }
      .tab.active {
        border-left-color: #ed2020;
        color: #ed2020;
        background-color: #ffffff;
      }
    }
    .right {
      flex-grow: 1;
      padding: 20rpx;
      overflow: auto;
      .screen-swiper-box {
        height: 180rpx;
      }
      .product-list {
        margin-top: 50rpx;
      }
    }
  }
  .list-item {
    border-radius: 12rpx;
    background-color: #ffffff;
    overflow: hidden;
    margin-bottom: 24rpx;
    box-shadow: 0px 3px 4px 0px rgba(0,0,0,.07);
    .vote-img {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      border-radius: 6px 6px 0px 0px;
      background: no-repeat;
      background-size: 100% 100%;
    }
    .vote-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 6rpx 0;
      .vote-name {
        font-size: 12px;
        margin-bottom: 12rpx;
      }
    }
    .vote_number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      line-height: 34px;
      color: #333333;
      .vote_number_text2 {
        color: rgba(133, 107, 223,1);
      }
    }
    .vote-button-right {
      width: 100%;
      margin-top: 30rpx;
      font-size: 28rpx;
      padding: 12rpx 0;
      background-color: rgb(112, 76, 237);
      border-radius: 12rpx;
      text-align: center;
      color: #ffffff;
    }

    .vote-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      margin: 12rpx auto 0;
      color: #ffffff;
      height: 40rpx;
      text-align: center;
      .vote-button-left {
        flex: 1;
        font-size: 28rpx;
        padding: 10rpx 0;
        background-color: rgba(94, 185, 94, 0.26);
        color: rgba(133, 107, 223,1);
        margin-right: -40rpx;
        border-bottom-left-radius: 20rpx;
        border-top-left-radius: 20rpx;
      }
    }
    .list-icon {
      height: 220rpx;
      width: 100%;
    }
    .list-text {
      padding:0 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      .list-title {
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 14rpx;
        text-align: center;
      }
      .list-desc {
        font-size: 24rpx;
        color: #999999;
        margin-bottom: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
